import React,{Component,PropTypes} from 'react';
import OssUpload from "components/OssUpload";
import {redirect,backward} from 'lib/utils';
import API, {} from 'lib/api';
import {Form, Select, Input, InputNumber, Button} from 'antd';
import './style.less';

const FormItem = Form.Item;
const Option = Select.Option;

/*     编辑状态数据模拟    */
import banner from 'images/banner.png';
const initData = {
    name:"Porsche 911",
    intro:"12月预售,顶级配置现场提车",
    sort:"cart",
    price:"99998",
    marketPrice:"99999",
    costPrice:"999997",
    inventory:"2",
    exhibition:'put',
    img:banner
};


class CommonInfo extends Component{
    constructor(props){
        super(props);
        this.state={
            hasImg:true ,       // 有图片
        }
    };


    componentDidMount(){
        const {id} = this.props;
        if(id){
            // API.fetch("",{id:id},resp=>{
            //     this.setState({ initData:initData })
                    this.props.form.setFieldsValue(initData);         // 设置控价默认值
                    this.setState({ img:initData.img, hasImg:true }); // 设置图片显示,并去掉图片为空时错误提示
            // });
        };


        // API.fetch("",{id:id},resp=>{  获取商品分类
            const goods_sort = [
                {name:"汽车",value:"cart"},
                {name:"水果",value:"fruits"},
            ];

            this.setState({goods_sort:goods_sort})

        // });


    };



    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }else {
                //  必传图片的错误信息提示,是否显示
                if(err.img){
                    this.setState({hasImg:false})
                }else{
                    this.setState({hasImg:true})
                }
            }
        });
    }


    handlerPic(field){
        this.props.form.setFieldsValue({
            img: field
        });
        console.log(field);

        // ++ 图片上传操作后,对错误信息提示的处理
        let hasImg = false
        field?hasImg = true:null

        this.setState({
            img:field,
            hasImg:hasImg
        })
    }




    render(){
        const { getFieldDecorator } = this.props.form;
        const {hasImg,goods_sort} = this.state;
        return(

                <Form onSubmit={this.handleSubmit} className="common-info">
                    <FormItem
                        label="商品名称"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 8 }}
                    >
                        {getFieldDecorator('name', {
                            rules: [{ required: true, message: '请输入商品名称' }],
                        })(
                            <Input placeholder="请输入商品名称"/>
                        )}
                    </FormItem>

                    <FormItem
                        label="商品简介"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 8 }}
                    >
                        {getFieldDecorator('intro', {
                            rules: [{ required: false, message: '请输入商品简介' }],
                        })(
                            <Input placeholder="请输入商品简介"/>
                        )}
                    </FormItem>

                    <FormItem label="商品分类" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                        {getFieldDecorator('sort', {
                            rules: [{ required: true, message: '请选择商品分类' }],
                        })(
                            <Select placeholder="请选择商品分类" onChange={this.handleSelectChange} >
                                {
                                    goods_sort?
                                        goods_sort.map((v,k)=>(
                                            <Option key={k} value={v.value}>{v.name}</Option>
                                        ))
                                    :null
                                }

                            </Select>
                        )}
                    </FormItem>

                    <FormItem label="商品价格" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                        {getFieldDecorator('price', {
                            rules: [{ required: true, message: '请输入商品价格' }],
                        })(
                            <InputNumber precision={2} placeholder="请输入商品价格"/>
                        )}
                    </FormItem>

                    <FormItem label="商品市场价" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                        {getFieldDecorator('marketPrice', {
                            rules: [{ required: false, message: '请输入商品市场价' }],
                        })(
                            <InputNumber precision={2} placeholder="请输入商品市场价"/>
                        )}
                    </FormItem>

                    <FormItem label="商品成本价" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                        {getFieldDecorator('costPrice', {
                            rules: [{ required: false, message: '请输入商品成本价' }],
                        })(
                            <InputNumber precision={2} placeholder="请输入商品成本价"/>
                        )}
                    </FormItem>

                    <FormItem label="商品库存" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                        {getFieldDecorator('inventory', {
                            rules: [{ required: true, message: '请输入商品库存' }],
                        })(
                            <InputNumber precision={0} placeholder="请输入商品库存" />
                        )}
                    </FormItem>

                    <FormItem
                        label="是否上架"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 8 }}
                    >
                        {getFieldDecorator('exhibition', {
                            rules: [{ required: false, message: '请选择是否上架商品' }],
                        })(
                            <Select
                                placeholder="请选择是否上架商品"
                                onChange={this.handleSelectChange}
                            >
                                <Option value="put">上架</Option>
                                <Option value="pull">下架</Option>
                            </Select>
                        )}
                    </FormItem>

                    <FormItem style={{marginBottom:6}}>
                        {getFieldDecorator('img', {
                            rules: [{ required: true, message: ' ' }],
                        })(
                            <OssUpload default={this.state.img}
                                       onFieldSet={this.handlerPic.bind(this)}
                                       multiple={false}
                                       lable="商品图片"
                            />
                        )}
                    </FormItem>
                    {/*  原有图片上传的必填提示信息,位置不好修改所以另起一行做提示  */}
                    <div className="ant-row ant-form-item oss-upload_elem" style={{visibility:hasImg?"hidden":"visible"}}>
                        <label className="ant-form-item-label ant-col-sm-2">  </label>
                        <div className="ant-col-8 ant-form-item-control-wrapper" style={{color: "#f04134"}}>请选择图片</div>
                    </div>

                    <FormItem
                        wrapperCol={{ span: 8, offset: 2 }}
                    >
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </FormItem>
                </Form>
        )
    }
};

export default Form.create()(CommonInfo);